<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">

    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>知识类型统计图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-bar-type"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>知识引用次数TOP10</h5>
                    </div>
                    <div class="ibox-content fff" style="height: 276px; overflow-y:auto;">
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>知识标题</th>
                                    <th>引用次数</th>
                                    <th>知识提交人</th>
                                </tr>
                            </thead>
                            <tbody id="performanceShow"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>知识累积数量统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>知识贡献量统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-bar-contribute"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>

    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script src="../../js/handlebars-v3.0.1.js"></script>

    <script id="tpl" type="text/x-handlebars-template">

        {{! 知识引用次数TOP10 }}
        {{#each performanceShow}}
            <tr>
                <td>{{index}}</td>
                <td>{{title}}</td>
                <td>{{num}}</td>
                <td>{{person}}</td>
            </tr>
        {{/each}}
    
    </script>

    <script type="text/javascript">
        $(function () {

            // ---------- Handlebars模板引擎 ---------- 
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板


            // ---------- 知识类型统计图：柱状图 ----------
            var barTypeChart = echarts.init(document.getElementById("echarts-bar-type"));
            var barTypeData = [30, 45, 22, 8];
            var barTypeoption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    height: '90%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['咨询类', '问题处理类', '文献类', '规范制度类'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    },
                    axisLabel: {
                        fontSize: 14,
                        color: '#000000',
                        formatter: function (params) {  // 分隔x轴文字
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 5;  //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '40%',
                    data: barTypeData,
                    label: {   // 图形上的文本标签
                        show: true,
                        position: 'insideTop', // 相对位置
                        color: '#fff'
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            color: function (params) {
                                var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }]
            };
            barTypeChart.setOption(barTypeoption);
            $(window).resize(barTypeChart.resize);


            // ---------- 知识引用次数TOP10：表格 ----------
            var perforContext = {
                "performanceShow": [
                    {
                        "index": "1",
                        "title": "咨询类增多",
                        "num": "1",
                        "person": "五名"
                    },
                    {
                        "index": "2",
                        "title": "问题类减少",
                        "num": "3",
                        "person": "王东"
                    },
                    {
                        "index": "3",
                        "title": "问题类减少",
                        "num": "1",
                        "person": "田螺"
                    }
                ]
            };
            var performanceShow = template(perforContext); //匹配json内容
            $("#performanceShow").html(performanceShow); //输入模板


            // ---------- 知识累积数量统计：折线图 ----------
            var lineChart = echarts.init(document.getElementById("echarts-line"));
            var lineData = [0, 22, 3, 20, 40, 60, 80, 70, 10, 20, 30, 100];
            var lineoption = {
                grid: {
                    top: '10%',
                    bottom: '10%',
                    left: '10%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    boundaryGap: false,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: lineData,
                    type: 'line'
                }]
            };
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);


            // ---------- 知识贡献量统计：柱状图 ----------
            var barConChart = echarts.init(document.getElementById("echarts-bar-contribute"));
            var barConData = [13, 12, 8, 6];
            var barConoption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    height: '90%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['五名', '王东', '大磊', '小邵'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    },
                    axisLabel: {
                        fontSize: 14,
                        color: '#000000',
                        formatter: function (params) {  // 分隔x轴文字
                            var newParamsName = "";
                            var paramsNameNumber = params.length;
                            var provideNumber = 5;  //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#999', // X轴及其文字颜色
                        }
                    }
                }],
                series: [{
                    name: '数量',
                    type: 'bar',
                    barWidth: '40%',
                    data: barConData,
                    label: {   // 图形上的文本标签
                        show: true,
                        position: 'insideTop', // 相对位置
                        color: '#fff'
                    },
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            color: function (params) {
                                var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }]
            };
            barConChart.setOption(barConoption);
            $(window).resize(barConChart.resize);


        })
    </script>
</body>

</html>